@extends('layouts.template')

@section('title', '待报价订单')

@section('header')
@endsection

@section('content')
    <script src="{{asset('dist/order/appoint.js')}}"></script>
    <script>
        var weeks = {!! json_encode($weeks) !!};
    </script>

    <article id="article" v-cloak>
        <div v-if="doSubmit" class="od_box">
            <div class="od_body_1 ">
                <h1>预约成功</h1>
                <h2>您的预约时间为</h2>
                <h3>@{{door_time | localDate}}</h3>
                <p>温馨提示：请务必按您预约的时间上门服务，
                    上门时间的准确率将会直接影响下单用户对
                    您的评分和系统给您推送订单。</p>
                <a href="{{url("order/detail/{$order->id}")}}">我知道了</a>
            </div>
        </div>

        <div v-show="!doChoose">
            <form id="form">
                {{csrf_field()}}
                <input name="order_id" type="hidden" value="{{$order->id}}">
                <input v-model="door_time" name="door_time" type="hidden">
                <div class="offer_t2" style="margin-top:0;">
                    <a href="tel:{{$order->detail->customer_phone}}" style="color: #3e3938"><p style="padding-top:2%; padding-bottom:2%">
                        <span class="tel_of02"><img src="{{asset('images/ico20.png')}}" ></span><span class="tel_of03"><img src="{{asset('images/tel.png')}}"></span>
                        预约客户:{{$order->detail->customer_name}} {{$order->detail->customer_phone}}</p></a>
                </div>


                <div class="offer_t2">
                    <p>电话预约客户后，请操作确认上门服务时间。</p>
                    <p style="padding-top:2%; padding-bottom:2%" @click="doChoose = !doChoose"><a><span class="tel_of02"><img src="{{asset('images/ico20.png')}}" ></span></a>
                        <span v-if="door_time" class="tel_of04">@{{door_time | localDate}}</span>
                    <i class="text05">*</i>上门服务时间：</p>
                </div>

                <div class="yuyue01"><p>温馨提示：操作确认预约客户后，系统将自动发送预约短信给客户，短信内容包含订单的服务完工确认码。</p></div>
                <a class="but14" @click="submit">确认提交</a>
            </form>
        </div>

        <div v-show="doChoose">
            <div class="dingdan01">
                <p>温馨提示：请选择已确认好预约上门服务的时间，上门时间的准确率
                    将会直接影响下单用户对您的评分和系统给您推送订单。</p>
            </div>

            <div class="yuyue02 overflow_h" style="margin-bottom:3%">
                @foreach ($options as $day_text=>$times)
                    <label><p><a><span class="tel_of02_1"><img src="{{asset('images/ico20.png')}}" ></span></a>
                            <input class="mar09" name="day" type="radio" @click="chooseDay">{{$day_text}}</p></label>
                    <div class="x_time overflow_h">
                        <ul class="ziliao_c_1">
                            @foreach ($times as $timestamp=>$time_text)
                                <li class="{{$loop->iteration % 3 ? 'mar04' : ''}}"><label>
                                    <input v-show="false" name="timestamp" type="radio" @click="door_time = '{{$timestamp}}';doChoose = !doChoose">
                                        <a class="zc01">{{$time_text}}</a></label></li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
            </div>

        </div>

    </article>

@endsection